<template>
	<div class="area">
		<UpImg :imgs='images'></UpImg>
	</div>
	<div class="area">
		<span class="color666"> 商品分类 </span>
		<span class="Symbol-red">*</span>
		<el-select v-model="clases" :placeholder="clases">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value"
		      :disabled="item.disabled"
		    />
		  </el-select>
	</div>

	<div class="area">
		<span class="color666"> 商品标题 </span>
		<span class="Symbol-red">*</span>
		<textarea class="textarea" v-model.trim="title" rows="5" placeholder="请输入商品标题 (商品标题组成: 商品表述+商品规格)"></textarea>
	</div>

	<div class="area">
		<span class="color666"> 价格： <span class="Symbol-red">*</span></span>
		<el-input-number v-model="price" :min="0" :max="999999"/>
	</div>
	<div class="area">
		<span class="color666"> 库存： <span class="Symbol-red">*</span></span>
		<el-input-number v-model="num" :min="1" :max="10"/>
	</div>
	<div class="area submit">
		<input type="submit" @click="btn" class="submit" value="提交并上架">
	</div>
</template>

<script lang="ts">
	import {
		defineComponent,
		ref,
		reactive,
		provide,
		watchEffect
	} from 'vue';
	import { ElMessage } from 'element-plus'
	import UpImg from '../../context/updateImg/index.vue';
	//url img 转 base64
	import {getBase64Image} from '@assets/tools/getBase64Image/index'
	export default defineComponent({
		components:{
			UpImg
		},
		props:{
			title:{
				type:String,
				default:'',
			},
			imgs:{
				type:Array,
				default:[]
			},
			genre:{
				type:String,
				default:''
			},
			price:{
				type:Number,
				default:0
			},
			sum:{
				type:Number,
				default:0
			},
		},
		setup(props,content) {
			let options=[
				'家具生活',
				'数码电器',
				'母婴玩具',
				'食品保健',
				'运动户外',
				'水果生鲜',
				'虚拟商品',
				'美容个护',
				'服饰箱包'].map(val=>{
					return {
						value:val,
						label:val
					}
				})
				//类别
				var clases=ref(options[0].value)
				//标题
				var title=ref(props.title)
				//价格
				var price=ref(props.price)
				//库存
				var num=ref(props.sum)
				//照片
				var images:any=ref(props.imgs)
				
				provide('GetImgs',(e:any)=>{
					e=Array.from(e)
					images.value=e;
				})
				function btn(){
					var message=''
					if(title.value.length<=0){
							message='请输入标题'
					}else if(images.value.length==0){
							message='商品图片不能为空!'
					}
					message!=''?
					 ElMessage({
					    message,
					    grouping: true,
					    type: 'error',
					  })
					:
					content.emit('response',{
						title:title.value,
						GetImgs:getImgs(),
						genre:clases.value,
						price:price.value,
						sum:num.value
					})
				}
				function getImgs(){
					return new Promise((resolve,reject)=>{
						var i=0;
						var arr:any[]=[];
						var list:any[]=Array.from(images.value)
						list.forEach(async (src:string)=>{
							var blob:any=await getBase64Image(src)
							i++;
							if(blob!=null)
								arr.push(blob);
							if(i>=list.length){
								resolve(arr)
							}
						})
					})
				}
				return {
					options,
					clases,
					title,
					price,
					images,
					num,
					btn
				}
		}
	})
	
</script>
<style>
	.area {
		margin-top: 10px;
		padding: 8px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.update {
		width: 15vw;
		height: 15vw;
		border: 1px solid #ccc;
		border-radius: 10%;
		position: relative;
		overflow: hidden;
	}

	.color666 {
		color: #666;
	}

	.colorffffff {
		color: #fff;
	}

	.Symbol-red {
		color: #e01e1e;
		margin-left: -5px;
		padding-right: 5px;
	}

	.Symbol-title {
		position: absolute;
		left: 0;
		top: 0;
		padding: 3px;
		font-size: .4em;
		border-radius: 10%;
		color: #fff;
		background-color: #37c;
	}

	.camera-icn {
		font-size: 2em;
		line-height: 15vw;
	}

	.bottom-text {
		width: 100%;
		font-size: .2em;
		position: absolute;
		bottom: 1px;
		left: 0;
	}

	.bottom-text,
	.camera-icn {
		color: #ccc;
		text-align: center;
	}

	.textarea {
		width: 100%;
		resize: none;
		font-size: 1.2em;
		color: #383838;
		border: none;
	}
	.submit {
	    width: 100%;
	    height: 3em;
	    position: fixed;
	    bottom: 0;
	    padding: 10px 0;
	    z-index: 999;
	}
	.submit input {
	    width: 90%;
	    height: 90%;
	    font-size: 1.2em;
	    text-align: center;
	    color: #fff;
	    border: none;
	    outline: none;
	    background-color: #dd4434;
	    border-radius: 5px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	}
</style>
